var ImageList = new Array()
$(function() {  
    //绑定鼠标滑动事件
    $(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)  
    $(".slider-panel input").on('mouseup',function(){
        var image_key = $(".result").attr("id")
        var threshold = parseFloat($(this).val())
        console.log(image_key,threshold)
        if (image_key==null){
          return
        }else{
          var begin = Date.now()
          Url = '/api/postprocess'
          index = $(".label").val()
          startloading()
          $.ajax({
              ContentType: "application/json",
              type: 'POST',
              dataType: "json",
              url: Url,
              data:JSON.stringify({"task":"Det","image":image_key, "postfunc":"changethreshold", "param":threshold}),
              success:function(res){
                  if (res.code==200){
                      var end = Date.now()
                      ImageList[res.image] = res.prod
                      $(".result").attr("src","data:image/png;base64,"+res.prod)
                      mes = "成功收到结果，系统处理时间："+(res.time*1000).toFixed(0)+"ms; 系统响应时间:"+(end-begin)+"ms"
                      stoploading(mes)
                  }else{
                      mes = "系统出错："+res.err
                      stoploading(mes)
                  }
              },
              error:function(XMLHttpRequest, textStatus, errorThrown) {
                  console.log(XMLHttpRequest, textStatus, errorThrown)
                  mes = "系统出错"+errorThrown
                  stoploading(mes)
              }
          })
        }
        
    })

    function moveSlider() { 
      // 获取当前滑条的动态值 
      let sliderValue = parseFloat($(this).val());  
      // 将滑条的值赋值给滑条划过后p标签的宽度  
      $('.slider-value').css('width', sliderValue + '%'); 
      // 显示当前滑条的动态值 
      $('.slider-percentage').text(sliderValue);  
    }

    initUpload()
})  

function initUpload(){
  console.log("绑定拖动事件")
  $(".uploadbox").on({
      "dragover": function(e){
          e.preventDefault()
          e.target.style.borderColor = "blue"
          e.target.style.borderWidth = "5px"
          console.log("文件进来了")
      },
      "dragleave": function(e){
          e.preventDefault()
          e.target.style.borderColor = "cadetblue"
          e.target.style.borderWidth = "medium"
      },
      "drop": function(e){
          e.preventDefault()
          e.stopPropagation()
          box = $("#upload")
          //image = $(".boximg")
          let file = e.originalEvent.dataTransfer.files;
          var reader = new FileReader();
          reader.onload = function(e){
              //image = reader.result
              html = "<div class=\"uploadbox\"><img class=\"boximg\"src=\""+reader.result+"\"></div>"
              box.before(html)
              var img = box.prev()
              //交给服务器推理
              var begin = Date.now()
              startloading()
              Url = '/api/infer'
              $.ajax({
                  ContentType: "application/json",
                  type: 'POST',
                  dataType: "json",
                  url: Url,
                  data:JSON.stringify({"task":"Det","img_a":reader.result}),
                  success:function(res){
                    if (res.code==200){
                      var end = Date.now()
                      console.log(res.time,(res.time*1000).toFixed(0),end-begin)
                      mes = "成功收到结果，系统处理时间："+(res.time*1000).toFixed(0)+"ms; 系统响应时间:"+(end-begin)+"ms"
                      stoploading(mes)
                      img.attr("id",res.image)
                      img.on({"click":function(e){
                          id = $(e.target).parent()[0].id
                          changeImage(id)
                      }})
                      ImageList[res.image] = res.prod
                      $(".result").attr("src","data:image/png;base64,"+res.prod)
                      $(".result").attr("id",res.image)
                    }else{
                      mes = "系统出错："+res.err
                      stoploading(mes)
                    }
                  },
                  error:function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest, textStatus, errorThrown)
                    mes = "系统出错"+errorThrown
                    stoploading(mes)
                  }
              })
          }
          e.target.style.borderColor = "cadetblue"
          e.target.style.borderWidth = "medium"
          reader.readAsDataURL(file[0])
      }
  })
}

function changeImage(image){
  prod = ImageList[image]
  $(".result").attr("src","data:image/png;base64,"+prod)
}
